<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="/css/mui.css" rel="stylesheet" />
		<script src="/js/mui.js"></script>
		<script src="/js/jquery-3.4.1.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<style>
			.cha_ul{
				overflow: hidden;
				margin:30px 0;
			}
			.cha_ul li{
				list-style:none;
			}
			.iconfont {
			    font-family: iconfont!important;
			    font-size: 16px;
			    font-style: normal;
			    -webkit-font-smoothing: antialiased;
			    -moz-osx-font-smoothing: grayscale;
			}
		</style>
	</head>

	<body style="background: #fff;">
		<header>
			<img src="/img/2/8a033789-9190-44d1-90ab-d153115c97e4.jpg" width="100%" />
		</header>
		<a href="/cha/cha2">
			<img src="/img/2/chaui.png" width=100%"" />
		</a>
		<style>
			.content-nr{
				overflow: hidden;
				margin-top:20px;
				box-shadow: 0 3px 13px rgba(0,0,0,.16);
				background: #fff;
			}
			.bswd{
				float:left;
				width:50%;
				padding: 0 17px;
			}
			.title-text{
				margin-top:15px;
				color:#0d2f90;
				font-size: 18px;
				min-height: 32px;
			}
			.more{
				float:right;
				margin-right:17px;
				font-size:12px;
				color:#333;
			}
			.more a{
				color:#333;
			}
			.more a:hover{
				color:#333;
			}
			
			.bmnews{
				float:right;
				width:50%;
				box-shadow: 5px 0 10px -5px rgba(0,0,0,.16) inset;
				
			}
			.newsul{
				font-size:10px;
				color:#333;
				border:0px red solid;
				padding:0;
				margin:0;
			}
			.newsul li{
				list-style:none;
			}
			.newsul li > .more{font-size:10px}
			li a{
				color:#333;
			}
			li a:hover{
				color:#333;
			}
			.gsgg{
				overflow: hidden;
				padding-left: 15px;
			}
			.wddbsx{
				margin-top:15px;
				box-shadow: 0 3px 13px rgba(0,0,0,.16);
				overflow: hidden;
				padding-left: 15px;
				height: 140px;
			}
		</style>
		<div class="content-nr">
			<div class="bswd">
				<div class="title-text">办事网点</div>
				<img src="/img/2/map.5030c755.png" width=100%""/>
				<div class="mui-input-row mui-search">
				    <input type="search" class="mui-input-clear" placeholder="搜索-办事地点">
				</div>
			</div>
			<div class="bmnews">
				<div class="gsgg">
					<div class="title-text">公示公告<span class="more"><a href="">更多 ></a></span></div>
					<ul class="newsul">
						<li>
							<a href="http://www.xabdcdj.cn/#/pages/governmentOpen/policyStatuteDetail?title=%E4%BD%9C%E5%BA%9F%E5%85%AC%E5%91%8A%EF%BC%882024%E5%B9%B42%E6%9C%8823%E6%97%A5%EF%BC%89&id=8584">
								作废公告（2024年2月23日）<span class="more">02.23</span>
							</a>
						</li>
						<li>
							<a href="">遗失声明（2024年2月23日）<span class="more">02.23</span></a>
						</li>
						<li>
							<a href="">继承公告（2024年2月23日）<span class="more">02.23</span></a>
						</li>
						<li>
							<a href="">继承公告（2024年2月23日）<span class="more">02.23</span></a>
						</li>
					</ul>				
				</div>

				<div class="wddbsx">
					<div class="title-text">我的待办<span class="more"><a href="">更多 ></a></span></div>
					<p>暂无</p>
					<p>待办事项</p>
				</div>

			</div>
			<img src="/img/2/bb.jpg" width="100%" />
		</div>
		<style>
			.container {
				position: fixed; /* 将容器固定在页面上 */
				bottom: 0; /* 将容器放置于页面底部 */
				left: 0; /* 左对齐 */
				width: 100%; /* 占据全屏宽度 */
				height: 50px; /* 设置容器高度 */
				background-color: #fff; /* 设置容器背景色 */
				border-top: 1px solid #ccc; /* 设置容器与页面之间的分隔线 */
			}
			
			ul.nav {
				list-style-type: none; /* 去除列表项前的标记符号 */
				margin: 0; /* 清空默认的margin值 */
				padding: 0; /* 清空默认的padding值 */
				display: flex; /* 使用flex布局 */
				justify-content: center; /* 水平居中 */
				align-items: center; /* 垂直居中 */
			}
			
			li.item {
				padding:10px 0;
				border:0px red solid;
				width:33%;
				text-align:center;
				
				margin:0;
				padding:0;
				padding-top:5px;
			}
			
			li.item img{
				width:20px;
				margin:0;
				padding:0;
			}
			
			li.item p{
				margin:0;
				padding:0;
				margin-top:-5px;
				font-size:10px;
				color: #000;
			}
			
			a.link {
				text-decoration: none; /* 取消超链接的下划线效果 */
				color: black; /* 设置文字颜色 */
			}
		</style>
		
		<div class="container">
			<ul class="nav">
				<li class="item">
					<div class="item">
						<img src="/img/2/1.png" class="pic1"/>
						<img src="/img/2/11.png" class="pic2"/>
						<p>便民服务</p>					
					</div>
				</li>
				<li class="item">
					<img src="/img/2/2.png" class="pic1"/>
					<img src="/img/2/22.png" class="pic2"/>
					<p>政务公开</p>
				</li>
				<li class="item">
					<img src="/img/2/3.png" class="pic1"/>
					<img src="/img/2/33.png" class="pic2"/>
					<p>个人中心</p>
				</li>
			</ul>
		</div>
	</body>
<script>
	$(function(){
		$(".pic2").hide();
		$(".item").click(function(){
			console.log(11)
			$(".pic1").show();
			$(".pic2").hide();
			$(this).find(".pic1").hide();
			$(this).find(".pic2").show();
		})
	})
</script>
</html>